<script setup>
import {ref, provide, computed, onMounted} from "vue";
import * as echarts from 'echarts';
import Ticket from "@/components/ml/Ticket.vue";
import "@/assets/ml/plane.css"
import Dialog from "@/components/ml/Dialog.vue";
import {getPlaneGratia, getPriceList} from "@/api/plane.js";

const imgArr = ref(["https://pic5.40017.cn/i/ori/1xXJmFYzzNe.jpg", "https://pic5.40017.cn/i/ori/1AepGl69jWM.png"])
const planeServiceArr = ref([
  {
    "img": "",
    "name": "我的机票",
    "msg": ""
  },
  {
    "img": "",
    "name": "航班动态",
    "msg": "微信扫码，查看航班动态-扫码打开微信小程序，随时掌握航班动态"
  },
  {
    "img": "",
    "name": "在线值机",
    "msg": "微信扫码，在线值机-扫一扫打开微信小程序，在线值机，省时省力"
  },
  {
    "img": "",
    "name": "飞行攻略",
    "msg": "微信扫一扫，飞行信息早知道-扫码打开微信小程序，飞行信息早知道"
  }])
const areaArr = ref([
  {"label": "北京", "name": "first"}, {"label": "上海", "name": "second"}, {"label": "广州", "name": "third"},
  {"label": "深圳", "name": "fourth"}, {"label": "重庆", "name": "fifth"}, {"label": "成都", "name": "sixth"},
  {"label": "杭州", "name": "seventh"}, {"label": "南京", "name": "eighth"}, {"label": "武汉", "name": "ninth"},
  {"label": "青岛", "name": "tenth"}, {"label": "西安", "name": "eleventh"}, {"label": "长沙", "name": "twelfth"}])
const dialogVisible = ref(false)
const title = ref("")
const foot = ref("")
const gratiaArr = ref([])
const num1 = computed(() => {
  return gratiaArr.value.splice(0, 6)
})
const num2 = computed(() => {
  return gratiaArr.value.splice(6, 6)
})
const num3 = computed(() => {
  return gratiaArr.value.splice(12, 6)
})
const changeVisible = (str) => {
  if (str) {
    dialogVisible.value = true
  }
  title.value = str.split("-")[0]
  foot.value = str.split("-")[1]
}
provide('dialogVisible', dialogVisible)
provide('title', title)
provide('foot', foot)
const activeName = ref('first')

let initialData = [["2000-06-05", 310], ["2000-06-06", 240], ["2000-06-07", 280], ["2000-06-08", 300], ["2000-06-09", 410], ["2000-06-10", 330], ["2000-06-11", 350], ["2000-06-12", 330], ["2000-06-13", 300], ["2000-06-14", 300], ["2000-06-15", 420], ["2000-06-16", 405], ["2000-06-17", 300], ["2000-06-18", 310], ["2000-06-19", 300], ["2000-06-20", 330], ["2000-06-21", 400], ["2000-06-22", 450], ["2000-06-23", 485], ["2000-06-24", 380], ["2000-06-25", 400], ["2000-06-26", 400], ["2000-06-27", 330], ["2000-06-28", 400], ["2000-06-29", 400], ["2000-06-30", 400], ["2000-07-01", 330], ["2000-07-02", 436], ["2000-07-03", 330], ["2000-07-04", 310], ["2000-07-05", 340]];


const getPlaneGratiaArr = async () => {
  const res = await getPlaneGratia()
  gratiaArr.value = res.data.data
}
const getPrice = async () => {
  const res = await getPriceList(area.value,area2.value)
  console.log(res)
  if (res.data.code==200){
    initialData = res.data.data
    if (initialData.length!=0){
      initChart(initialData);
    }else{
      ElMessage.error('没有找到该城市')
    }
  }else{
    ElMessage.error('没有找到该城市')
  }
}

let myChart = null;

// 生成日期列表的方法
const generateDateList = (dataPoints) => {
  const dateList = [];
  const currentDate = new Date();
  for (let i = 0; i < dataPoints; i++) {
    const newDate = new Date(currentDate);
    newDate.setDate(currentDate.getDate() + i);
    dateList.push(newDate.toISOString().split('T')[0]);
  }
  return dateList;
};
const initChart = (chartData) => {
  // 1. 获取DOM元素并初始化
  const chartDom = document.getElementById('echarts');
  if (!chartDom) return;

  // 2. 销毁旧实例避免内存泄漏
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(chartDom);

  // 3. 处理数据
  const valueList = chartData.map(item => item[1]);
  const dateList = generateDateList(valueList.length);

  // 4. 配置项
  const option = {
    visualMap: [{
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    }],
    tooltip: {
      trigger: 'axis'
    },
    xAxis: [{
      type: 'time',
      axisLabel: {
        formatter: '{yyyy}-{MM}-{dd}'
      },
      min: 'dataMin',
      max: 'dataMax'
    }],
    yAxis: [{}],
    series: [{
      type: 'line',
      showSymbol: false,
      data: valueList.map((v, i) => [dateList[i], v])
    }],
    grid: [{
      top: '10%',
      bottom: '15%',
      left: '10%',
      right: '10%'
    }]
  };

  // 5. 设置配置
  myChart.setOption(option);
};

onMounted(async () => {
  getPlaneGratiaArr();

  // 调用初始化方法
  initChart(initialData);
})

const area=ref("上海")
const area2=ref("北京")
</script>

<template>

  <div class="plane-top">
    <el-carousel height="370px" motion-blur>
      <el-carousel-item v-for="item in imgArr" :key="item">
        <img :src=item alt="">
      </el-carousel-item>
    </el-carousel>
    <Ticket ref="ticket"></Ticket>
    <div class="plane-service main">
      <div class="plane-text" style="margin-top: 50px">机票服务</div>
      <div class="plane-service-content">
        <div class="plane-service-content-div" v-for="item in planeServiceArr" :key="item.name"
             @click="changeVisible(item.msg)">
          <div><img :src=item.img alt="" width="44px"></div>
          <div>{{ item.name }}</div>
        </div>
        <div><img src="https://file.40017.cn/assets/air/images/v-enter-xcx.png" alt="" width="350px" height="201px">
        </div>
      </div>
    </div>

    <div class="plane-text gratia"><font color="#f7a300">特惠</font>机票</div>
    <div class="plane-gratia main">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane v-for="(item,index) in areaArr" :key="index" :label=item.label :name=item.name style="width: 1190px">
          <div class="plane-gratia-div">
            <ul>
              <li v-for="item1 in num3">
                <div>{{ item.label }}→{{ item1.name }}</div>
                <div>
                  {{
                    new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
                  }}-{{ new Date().getDate() < 10 ? '0' + (new Date().getDate()) : new Date().getDate() }}
                </div>
                <div>{{ item1.price }}</div>
              </li>
            </ul>
            <ul>
              <li v-for="item1 in num2">
                <div>{{ item.label }}→{{ item1.name }}</div>
                <div>
                  {{
                    new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
                  }}-{{ new Date().getDate() < 10 ? '0' + (new Date().getDate()) : new Date().getDate() }}
                </div>
                <div>{{ item1.price }}</div>
              </li>
            </ul>
            <ul>
              <li v-for="item1 in num1">
                <div>{{ item.label }}→{{ item1.name }}</div>
                <div>
                  {{
                    new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
                  }}-{{ new Date().getDate() < 10 ? '0' + (new Date().getDate()) : new Date().getDate() }}
                </div>
                <div>{{ item1.price }}</div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="plane-price main">
      <div class="plane-price-head">
        <div class="plane-text">价格趋势</div>
        <div class="plane-price-input">
          <div><el-input v-model="area" style="width: 158px;height: 34px" placeholder="可输入城市" /></div>
          <div class="replace switch">&nbsp;</div>
          <div><el-input v-model="area2" style="width: 158px;height: 34px" placeholder="可输入城市" /></div>
          <div class="plane-price-search" @click="getPrice">查看趋势</div>
        </div>
      </div>
      <div id="echarts" style="width: 1190px;height: 386px"></div>
    </div>
  </div>
  <Dialog></Dialog>
</template>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item {
  color: #475669;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.plane-top {
  position: relative;
}

.ticket {
  position: absolute;
  z-index: 10;
  top: 35px;
  left: 360px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.gratia {
  width: 1190px;
  margin: 0 auto 21px auto;
}

.plane-gratia {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
}

.plane-gratia-div {
  display: flex;
  justify-content: space-between;
  padding: 0 30px 20px 30px;

ul {
  width: 30%;
}
}

.plane-gratia ul li {
  display: flex;
  justify-content: space-between;
  line-height: 38px;
  cursor: pointer;

div:nth-of-type(1) {
  width: 120px;
}

div:nth-of-type(2) {
  width: 100px;
  text-align: center;
}

div:nth-of-type(3) {
  width: 100px;
  text-align: right;
}
}

.plane-price{
#echarts{
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
}
.plane-price-head{
  display: flex;
  align-items: center;
}
}
.replace{
  width: 50px;
  position: relative;
}
.replace.switch:after {
  position: absolute;
  content: "";
  width: 26px;
  height: 26px;
  top: -3px;
  left: 12px;
  background: url() no-repeat;
  background-size: cover;
  cursor: pointer;
}

.plane-price-input{
  display: flex;
  align-items: center;
  margin-bottom: 21px;
  margin-left: 20px;
}
.plane-price-search{
  background: linear-gradient(90deg, #0dd0a0, #00c777);
  border-radius: 2px;
  color: #fff;
  width: 100px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  margin-left: 20px;
  cursor: pointer;
}
</style>